<template>
	<div id="StarCity">
		<p>关注的城市</p>
		<ul class="cities">
			<!-- 当关注城市列表为空时显示 -->
			<li v-if="!star_cities_list[0]" style="font-size: 0.8em; color: #aaa; text-align: center;">点击“添加关注”添加城市哟~</li>
			<!-- 循环生成每个关注的城市 -->
			<li class="each_city"  
				@click="selectCity" 
				@mouseenter="enterLi" 
				@mouseleave="leaveLi" 
				ref="each_city"  
				v-for="(item,index) in star_cities_list" 
				:key="index"
				:data_id="item.id"
				:index="index">
				<div class="city_name">{{item.name}}</div>
				<div class="set_default">设为默认</div>
				<div class="weather_status">
					<img v-bind:src= "img_url + item.icon + '.png'"/>
					{{item.textDay == item.textNight ? item.textDay : item.textDay + '转' + item.textNight }}
				</div>
				<div class="temp_range">{{item.tempMin}}°/{{item.tempMax}}°</div>
				<a class="star_delete" @click.stop="deleteStar" href="javascript:"></a>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data: function () {
			return {
				
			}
		},
		props: {
			star_cities_list: Array
		},
		methods: {
			// 当选中了某个收藏的城市时，将该城市的id传递给上级组件;
			selectCity: function (e) {
				let id = e.currentTarget.getAttribute("data_id");
				
				this.$emit("switchCity",id)
			},
			// 当鼠标移入某个li标签时，改变背景颜色，显示设置默认按钮
			enterLi: function (e) {
				e.target.style = "background-color: #f4f4f4"
				e.target.getElementsByClassName('star_delete')[0].setAttribute('style','display:block;')
				e.target.getElementsByClassName('set_default')[0].setAttribute('style','display:block;')
			},
			// 当鼠标离开某个li标签时，改变背景颜色，隐藏设置默认按钮
			leaveLi: function (e) {
				setTimeout(() => {
					e.target.style = "background-color: #fff"
					e.target.getElementsByClassName('set_default')[0].setAttribute('style','display:none;')
					e.target.getElementsByClassName('star_delete')[0].setAttribute('style','display:none;')
				},100)
			},
			// 当点击删除某个li时，删除star_cities_list中对应下标的项
			deleteStar: function (e) {
				let index = e.target.parentNode.getAttribute('index')
				this.$props.star_cities_list.splice(index,1)
			}
		},
		computed: {
			img_url: function () {
				return process.env.BASE_URL + 'WeatherIcon/weather-icon-S1/color-64/'
			}
		}
	}
</script>

<style lang="less">
	#StarCity {
		width: 418px;
		min-height: 120px;
		padding-top: 20px;
		padding-bottom: 10px;
		background-color: #fff;
		border-radius: 5px;
		box-sizing: border-box;
		font-size: 0.9em;
		z-index: 2;
		p {
			padding-left: 20px;
			font-size: 0.7em;
			color: #aaa;
			margin: 0;
		}
		ul {
			color: #7c7c7c;
			margin-top: 10px;
			li {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 35px;
				padding-left: 20px;
				padding-right: 20px;
				div {
					display: inline-block;
				}
				.set_default {
					display: none;
					position: absolute;
					left: 60px;
					font-size: 12px;
					background-color: #f7f7f7;
					line-height: 18px;
					border-radius: 3px;
					border: 1px solid #cecece;
					padding: 0 3px;
				}
				.weather_status {
					img {
						position: static;
						width: 20px;
						height: 20px;
						vertical-align: middle;
					}
				}
				.star_delete {
					display: none;
					position: absolute;
					right: 10px;
					height: 15px;
					width: 15px;
					background-image: url(../../public/sprite.png);
					background-position: -216px -145px;
				}
				.temp_range {
					margin-right: 20px;
				}
			}
		}
	}
</style>
